<style>
    input[type=file]{
        display: none;
    }
    .summary{
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .select_font{
        color:#bfcbd9
    }
    .el-input__inner{
        border-radius:0;
        height: 34px;
        color: black;
    }
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        附件管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="enclosure-app">

    <div class="row">
        <div class="col-md-1">
            <a v-show="!show.edit" class="btn btn-info" @click="add">添加</a>
            <a v-show="show.edit" class="btn btn-danger" @click="show.edit = false">关闭</a>
        </div>
        <div class="col-md-8" v-show="!show.edit">
            <div class="col-md-3">
                <select class="form-control" v-model="page.curriculum_id">
                    <option value="0" class="select_font">全部课程……</option>
                    <option v-for="c in curriculumList" :value="c.id">{{c.name}}</option>
                </select>
            </div>
            <div  class="col-md-2">
                <select class="form-control" v-model="page.course_service_id">
                    <option value="0">全部栏目……</option>
                    <option v-for="c in serviceList" :value="c.service_id">{{c.service_name}}</option>
                </select>
            </div>
            <div  class="col-md-2">
                <input class="form-control" v-model="page.title" placeholder="附件标题...">
            </div>
            <div class="col-md-2 block">
                <el-date-picker
                        v-model="page.select_time"
                        type="daterange"
                        placeholder="选择查询时间范围"
                        :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
            </div>
        </div>
        <div class="col-md-2">
            <a v-show="!show.edit" class="btn btn-default" @click="getList">查询</a>
            <a v-show="!show.edit" class="btn btn-default" @click="reset">重置</a>
        </div>
    </div>

    <div class="row" v-show="!show.edit">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>所属课程</th>
                    <th>所属栏目</th>
                    <th>附件标题</th>
                    <th>附件格式</th>
                    <th>上传时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.curriculum_name}}</td>
                    <td>{{item.service_name}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.type}}</td>
                    <td>{{item.create_time}}</td>
                    <td>
                        <a class="btn btn-info btn-xs" @click="edit(item)">编辑</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.edit">
        <div class="col-md-8 col-md-offset-2">
            <h3>编辑</h3>
            <div class="form" role="form">

                <div class="form-group">
                    <label>课程：<a class="btn btn-info btn-xs" @click="getCurriculum">刷新</a></label>
                    <select class="form-control" v-model="temp.curriculum_id">
                        <option v-for="c in curriculumList" :value="c.id">{{c.name}}</option>
                    </select>
                </div>

                <div class="form-group" v-if="!temp.id">
                    <label>所属栏目：</label>
                    <template>
                        <el-checkbox-group
                                v-model="temp.course_service_id"
                                :min="1">
                            <el-checkbox v-for="s in serviceList" :label="s.service_id" :key="s.service_id">{{s.service_name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </div>

                <div class="form-group" >
                    <label>标题：</label>
                    <input class="form-control" v-model="temp.title" maxlength="32">
                </div>

                <div class="form-group">
                    <label>附件地址：</label>
                    <input class="form-control" v-model="temp.enclosure" maxlength="32"  disabled="disabled">
                </div>

                <div class="form-group" >
                    <label>附件：</label>
                    <el-upload
                            class="upload-demo"
                            drag
                            :action="upload_url"
                            :on-success="handleSuccess"
                            :file-list="file_list"
                            multiple
                            :headers="headers">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </div>


                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                </div>
            </div>
        </div>
    </div>


</section>


<script>
    var headers = adminHeaders();
    var upload_url= adminUrl('/alioss/get_policy?type=document');

    function Enclosure() {
        this.course_service_id = [];
        this.title = '';
        this.curriculum_id = 0;
        this.enclosure = '';
        this.type = '';
        this.id=0;
        this.size=0;
    }
    function pageF() {
        this.page=1;
        this.rows= 10;
        this.last=1;
        this.curriculum_id=0;
        this.course_service_id =0;
        this.title='';
        this.select_time=[];
    }
    var messageApp = new Vue({
        el: '#enclosure-app',
        data: {
            list: [],
            page: new pageF(),
            curriculumList: [],
            serviceList:[],
            upload_url:upload_url,
            headers:headers,
            temp: new Enclosure(),
            show: {
                edit: false
            },
            file_list:[]
        },
        mounted: function () {
            this.getList();
            this.getCurriculum();
            this.getService();
        },
        methods: {
            getList: function () {
                if(this.page.select_time.length == 2 && this.page.select_time[0] && this.page.select_time[1]){
                    this.page.select_time[0]=this.format(this.page.select_time[0]);
                    this.page.select_time[1]=this.format(this.page.select_time[1]);
                }
                ajax({
                    uri: '/enclosure/list',
                    data: this.page,
                    success: function (resp) {
                        this.list = resp.data.data;
                        this.page.last = resp.data.last_page;
                    }.bind(this)
                });
                this.show.edit = false;
            },
            getCurriculum: function () {
                ajax({
                    uri: '/common/enclosure_curriculums',
                    success: function (resp) {
                        this.curriculumList = resp.data;
                    }.bind(this)
                });
            },
            getService: function () {
                ajax({
                    uri: '/common/course_service',
                    success: function (resp) {
                        this.serviceList = resp.data;
                    }.bind(this)
                });
            },
            handleSuccess:function(resp,fileObj){
                var file=fileObj.raw;
                if (200 != resp.code) throw new DOMException(resp);
                var data = resp.data;

                var t = Date.now(), name = file.name;

                var path = data.dir + "/" + t + randomString() + name.substr(name.lastIndexOf('.'));

                var formData = new FormData();
                formData.append('policy', data.policy);
                formData.append('OSSAccessKeyId', data.accessid);
                formData.append('success_action_status', 200);
                formData.append('signature', data.signature);
                formData.append('key', path);
                formData.append('file', file);
                this.$http.post(data.host, formData, {progress: this.uploadProgress}).then(function (resp) {
                    this.temp.type=name.substr(name.lastIndexOf('.')+1);
                    this.temp.enclosure =(data.dns || data.host) + '/' + path;
                    this.temp.size=file.size;
                    this.file_list=[];
                });
            },

            add: function () {
                this.temp = new Enclosure();
                this.show.edit = true;
                this.getCurriculum();
                this.getService();
            },
            edit: function (item) {
                if (!item.extras) {
                    item.extras = {
                        linkType: 0,
                        linkId: ''
                    }
                }
                this.temp = Object.assign(new Enclosure(), item);
                this.show.edit = true;
                this.getCurriculum();
                this.getService();
            },
            reset:function(){
                this.page = new pageF();
            },
            save: function () {
                var item = this.temp;
                if (!item.course_service_id || !item.type ||
                    !item.enclosure || item.course_service_id.length<1 ||!item.title) {
                    alert('请完善资料！');
                    return;
                }
                ajax({
                    uri: '/enclosure/save',
                    data: item,
                    success: function(resp){
                        this.show.list = true;
                        this.show.edit = false;
                        this.getList();
                    }.bind(this)
                });
            },

            del: function (item) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ajax({
                        uri: '/enclosure/delete',
                        data: {id: item.id},
                        success: function (resp) {
                            this.getList();
                        }.bind(this)
                    })

                });
            },
            format : function(time, format='yyyy-MM-dd HH:mm:ss'){
                var t = new Date(time);
                var tf = function(i){return (i < 10 ? '0' : '') + i};
                return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
                    switch(a){
                        case 'yyyy':
                            return tf(t.getFullYear());
                            break;
                        case 'MM':
                            return tf(t.getMonth() + 1);
                            break;
                        case 'mm':
                            return tf(t.getMinutes());
                            break;
                        case 'dd':
                            return tf(t.getDate());
                            break;
                        case 'HH':
                            return tf(t.getHours());
                            break;
                        case 'ss':
                            return tf(t.getSeconds());
                            break;
                    }
                })
            },
            turn: function (page) {
                this.page.page = page;
                this.getList();
            }
        },
        watch: {
            'page.page': function (nv, ov) {
                this.getList();
            }
        }
    })
</script>
